<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace  ="/public/head :: head"></head>

<style>
    .section{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .menuset-item{
        line-height:40px;
        width: 33%;
    }
    .menuset-item .item-one{
        margin-left: 50px;
    }
    .menuset-item img{
        width: 25px;
        height:  25px;
        margin-left: 10px;
        cursor: pointer;
    }
    .menuset-item  .add-item{
        width: 40px;
        height: 40px;
    }

    #layer_modal form{
        width: 90%;
        margin: 20px auto;
        box-sizing: border-box;
    }
    #layer_modal form label{
        text-align: center;
    }
    #layer_modal form input{
        width: auto;
    }
    #layer_modal form .menuLogo{
        width: 700px;
    }
    #layer_modal form .redio-div{
        display: flex;
        align-items: center;
    }
    #layer_modal .operation{
        margin-top:40px;
    }
</style>
<body>
<nav th:replace="/public/head::nav"></nav>

<div class="container-box">
    <aside th:replace="/public/aside::aside"></aside>

    <section>
        <div class="section">

            <div class="menuset-item" th:each="menu : ${allMenuList}">

                ▍<span th:text="${menu.name}"></span>
                 <img th:onclick="openEditModal(1,[[${menu}]])"  src="/static/tzss-img/tools/edit.png"/>
                 <img th:onclick="delMenu(1,[[${menu.id}]],[[${#lists.size(menu.menuSecondList)}]])" src="/static/tzss-img/tools/del.png"/>

                <div class="item-one" th:each="option : ${menu.menuSecondList}">

                    <a  th:text="${option.name}">
                        交互错误!
                    </a>
                    <img th:onclick="openEditModal(2,[[${option}]])"  src="/static/tzss-img/tools/edit.png"/>
                    <img th:onclick="delMenu(2,[[${option.id}]])" src="/static/tzss-img/tools/del.png"/>
                </div>
                <img th:onclick="openEditModal(2,undefined,[[${menu.id}]])" src="/static/tzss-img/tools/add.png" class="item-one add-item"/>
            </div>
            <div class="menuset-item">
                ▍<img th:onclick="openEditModal(1)" src="/static/tzss-img/tools/add.png" class="add-item"/>
            </div>

        </div>
    </section>
</div>

<!--修改 增加菜单 静态框-->
<div id="layer_modal" style="display: none">
    <form class="layui-form" lay-filter="layer_modal">

        <div class="layui-form-item">
            <label class="layui-form-label">I D</label>
            <div class="layui-input-block">
                <input type="text" name="id" readonly="readonly" v-bind:value="menu.id" placeholder="自动生成" class="layui-input disabled"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" v-bind:value="menu.name" lay-verify="required"  placeholder="请输入菜单名" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <!--vue 和 layui的radio存在冲突 这里使用jquery操作-->
                <input  type="radio"  name="menuType" value="1" title="管理员" class="radio1"/>
                <input   type="radio" name="menuType" value="2" title="客户" class="radio2" checked/>
            </div>
        </div>

        <div class="layui-form-item" v-if="mtype==1">
            <label class="layui-form-label">Logo</label>
            <div class="layui-input-block">
                <input type="text" name="menuLogo"  v-bind:value="menu.menuLogo" lay-verify="required"   placeholder="本地图片路径,如:/static/img/logo.png" autocomplete="off" class="layui-input menuLogo"/>
            </div>
        </div>

        <div class="layui-form-item" v-if="mtype==1">
            <label class="layui-form-label">顺序</label>
            <div class="layui-input-block">
                <input type="text" name="level"  v-bind:value="menu.level"  lay-verify="required|number" placeholder="数值越小，越靠前" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item" v-if="mtype==2">
            <label class="layui-form-label">Url</label>
            <div class="layui-input-block">
                <input type="text" name="url"  v-bind:value="menu.url"   lay-verify="required" placeholder="点击行为" autocomplete="off" class="layui-input menuLogo"/>
            </div>
        </div>

        <div class="layui-form-item" v-if="mtype==2">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-block">
                <input type="text" name="menuParent"   v-bind:value="menu.menuParent"  lay-verify="required|number" placeholder="id" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" v-if="mtype==2">
            <label class="layui-form-label">项目Id</label>
            <div class="layui-input-block">
                <input type="text" name="obid"   v-bind:value="menu.obid"  lay-verify="required|number" placeholder="obid" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block operation">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button class="layui-btn" lay-submit lay-filter="*">保存</button>
            </div>
        </div>
    </form>
</div>

<script>
    //初始化vue对象
    const myMenu = new Vue({
        el: '#layer_modal',
        data: {
            menu:'',
            mtype:0//如果mtype为1 表示一级菜单 2 就表示 二级菜单_区分新增时操作
        }
    })

    /**
     * 删除菜单
     * t 菜单 1 2
     * id 菜单id
     * l 子菜单数量
     * */
     function delMenu(t,id,l){
         console.log("删除菜单",t,id,l);
        if(t == 1){
            //删除一级菜单必须要先删除二级菜单
            if(l==0){
                if(confirm("你正在删除菜单【"+id+"】?")){
                    $.ajax({
                        url:"/admin/del_menu",
                        data:{"id":id},
                        success(){
                            window.location.reload();
                        }
                    })
                }
            }else{
                mylayer.msg("请先删除下级菜单！");
            }
        }else if(t == 2){
            if(confirm("你正在删除菜单【"+id+"】?")){
                $.ajax({
                    url:"/admin/del_menu_second",
                    data:{"id":id},
                    success(){
                        window.location.reload();
                    }
                })
            }
        }
     }
    /**
     * 打开 编辑 菜单 静态框   一级或则二级
     * @param t
     * @param v
     */
    function openEditModal(t,v,id){
        console.log("modal操作:",t,'--',v);

        myMenu.mtype = t;

        if(v!=undefined){
            myMenu.menu = v;
            <!--vue 和 layui的radio存在冲突 layui对redio做了封装 这里使用jquery操作-->
            $(".radio"+v.menuType).prop("checked",true);
            layui.use('form',function(){
                let form = layui.form;
                form.render();
            });
        }else{
            //清空 form的内容 避免存在上次保留
            $("form")[0].reset();
            //如果时子菜单还要设置父级的id
            if(t == 2){
                myMenu.menu={},
                myMenu.menu.menuParent = id;
                console.log("新增子菜单，上级:",myMenu.menu.menuParent);
            }
        }


        mylayer.openModal($("#layer_modal"),'菜单编辑框');
    }


    layui.use('form', function(){
        let form = layui.form;

        //各种基于事件的操作
        form.on("submit(*)", function(data){

            //可以使用data.field获取表单数据 但是不能 用作参数 object 和 字符串都不行
            // let formdata =JSON.stringify(data.field);
            // console.log("提交编辑内容！菜单级别:",myMenu.mtype," 数据:",formdata);

            if(myMenu.mtype == 1){
                $.ajax({
                    type:"POST",
                    url:"/admin/add_or_update_menu",
                    data:$("form").serialize(),
                    success:function(res){
                        if(res == 1){
                            window.location.href="/index";
                        }else{
                            mylayer.msg("系统错误,请联系管理员解决!");
                        }
                    }
                })
            }else if(myMenu.mtype == 2){
                $.ajax({
                    type:"POST",
                    url:"/admin/add_or_update_menu_second",
                    data:$("form").serialize(),
                    success:function(res){
                        if(res == 1){
                            window.location.href="/index";
                        }else{
                            mylayer.msg("系统错误,请联系管理员解决!");
                        }
                    }
                })
            }else{
                mylayer.msg("系统错误,请联系管理员解决!");
            }

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

</script>
</body>
</html>